<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>#{lang.BaoHuTongDaoPinFanZhongDuan2}</title>
		<link rel="stylesheet"
			href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link href='/resources/bootstrap/css/bootstrap-datetimepicker.min.css'
			rel='stylesheet' />
		<style>
.bs-callout {
	padding: 20px;
	padding-left: 40px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px;
}

.bs-callout-danger {
	border-left-color: #ce4844;
}

.redNum {
	color: red;
	font-size: 22px;
	margin: 5px;
}

label {
	margin-left: 10px;
	margin-right: 10px;
	font-weight: normal;
}

input[type="checkbox"] {
	margin-left: 5px;
	margin-right: 5px;
}
td.details-control {
    background: url('/resources/img/table/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('/resources/img/table/details_close.png') no-repeat center center;
}

.param{
	font-weight: bold;
    font-size: 18px;
    margin: 5px;
    background-color: #cbe6f1;
}
#totalNum1,#totalMinutes1,#totalTimes1,#totalNum2,#totalMinutes2,#totalTimes2{
   font-weight: bold;
    font-size: 18px;
    margin: 5px;
}
</style>

	</ui:define>
	<ui:define name="content">
		<div id="contentDiv" class="row" style="padding-left: 20px; padding-right: 20px;">
			<div class="nav-tabs-custom">
				<ul id="selectUL" class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header" style="width:1000px;">
						<div class="navbar-form">
							<button id="columnsSelectButton" style="margin: 10px;"
								class="btn btn-default " onclick="onColumnsSelectDivClick();">
								#{lang.LieShaiXuan}<span id="columnsSelectButtonIcon" class="fa fa-caret-down"></span>
							</button>
							<div class="input-group">
								<div class="btn btn-default">
									<i class="fa fa-calendar"></i>
								</div>
								<div class="form-group">
									<input type="text" class="form-control" id="start" /> <input
										class="form-control" type="text" id="end" />
								</div>
								<button class="btn btn-default" onclick="query()">#{lang.ChaXun}</button>
							</div>
							<button id="selectButton" style="margin: 10px;"
								class="btn btn-default" onclick="onSelectDivClick();">
								#{lang.ShuJuShaiXuan} <span id="selectButtonIcon" class="fa fa-caret-down"></span>
							</button>
						</div>
					</li>
				</ul>
				<div class="panel-collapse collapse" id="columnsSelectDiv"
					style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.LieShaiXuan}</td>
								<td class="col-sm-1"><label><input id="columnsAll"
										checked="checked" type="checkBox"
										onchange="selectAllColumns(this.checked,'columns');" />#{lang.QuanXuan}</label></td>
								<td id="columns"> </td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="panel-collapse collapse" id="selectDiv"
					style="position: relative;">
					<table class="table"  style="margin:0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.DianYaDengJi}</td>
								<td class="col-sm-1">
									<label><input id="voltagesAll" checked="checked" type="checkBox"
											onchange="selectAll(this.checked,'voltages');" />#{lang.QuanXuan}
									</label>
								</td>
								<td id="voltages">
									<label><input name="voltages"
										type="checkbox" checked="checked" onchange="doFilter();" value="500" />500kV
									</label> 
									<label><input name="voltages" type="checkbox" onchange="doFilter();" checked="checked" value="220" />220kV</label>
								</td>
							</tr>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.XianLu}</td>
								<td class="col-sm-1"><label><input id="linesAll"
										checked="checked" type="checkBox"
										onchange="selectAll(this.checked,'lines');" />#{lang.QuanXuan}</label></td>
								<td id="lines"></td>

							</tr>
						</tbody>
					</table>
				</div>
				<div class="tab-content" style="padding:0;">
					<div class="bs-callout bs-callout-info row" id="description" style="margin:0 !important;padding:0px !important;">
					</div>
				</div>
				<div class="tab-content" style="padding:0;">
					<div style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr id="strategyOutput">
								<td class="col-sm-1" style="font-weight: bold;">#{lang.ChaXunCeLue}</td>
								<td>#{lang.MouBaoHuZai}
									<span id="strategyParam12" class="param"/>
									#{lang.GaoJingCiShuDaYuDengYu}
									<span id="strategyParam22" class="param"/>
									#{lang.JiWeiPiinFanZhongDuan}
									<button id="strategyEdit" type="button" class="btn btn-default btn-sm fa fa-pencil"/>
								</td>
								<td>
								   告警数量总计<span id='totalNum1'>0</span>条，共<span id='totalMinutes1'>0</span>分钟，其中过滤到通信通道异常<span id="totalTimes1">0</span>条。
								</td>
							</tr>
							<tr id="strategyInput" style="display:none;">
								<td class="col-sm-1" style="font-weight: bold;">#{lang.ChaXunCeLue}</td>
								<td>#{lang.MouBaoHuZai}
									<input id="strategyParam11" type="number" style="width: 50px;"/>
									#{lang.GaoJingCiShuDaYuDengYu}
									<input id="strategyParam21" type="number" style="width: 50px;"/>
									#{lang.JiWeiPiinFanZhongDuan}
									<button id="strategyCheck" type="button" class="btn btn-default btn-sm fa fa-check"/>
									<button id="strategyClose" type="button" class="btn btn-default btn-sm fa fa-close"/>
								</td>
								<td>
								   告警数量总计<span id='totalNum2'>0</span>条，共<span id='totalMinutes2'>0</span>分钟，其中过滤到通信通道异常<span id="totalTimes2">0</span>条。
								</td>
							</tr>
						</tbody>
					</table>
				</div>
					<div class="chart" id="tableDiv"
						style="position: relative;">
						<table id="alarmTable" class="table table-gray">
						</table>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="startTime"
			value="#{request.getParameter('startTime')}"></h:inputHidden>
		<h:inputHidden id="endTime" value="#{request.getParameter('endTime')}"></h:inputHidden>
		<h:inputHidden id="stationId"
			value="#{request.getParameter('stationId')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/echarts/echarts.min.v3.7.2.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="/resources/js/date-util.js"></script>
		<script>
		locale={
				XuHao:'#{lang.XuHao}',
				ShouCiGaoJing:'#{lang.ShouCiGaoJing}',
				DianYa:'#{lang.DianYa}',
				XianLu:'#{lang.XianLu}',
				BaoHu:'#{lang.BaoHu}',
				ZongJi:'#{lang.ZongJi}',
				mingXi:'#{lang.mingXi}',
				GaoJingShiJian:'#{lang.GaoJingShiJian}',
				BianDianZhan:'#{lang.BianDianZhan}',
				GaoJingNeiRong:'#{lang.GaoJingNeiRong}',
				ZhongDuanShiChang:'#{lang.ZhongDuanShiChang}',
				YiChangDingWei:'#{lang.YiChangDingWei}'
		}
		 var ulHeight = document.getElementById("selectUL").offsetHeight; 
		 var scrollYHeight = wrapperHeight - ulHeight -140;
		 $('#contentDiv').css('height',wrapperHeight);
		</script>
		<script type="text/javascript" src="dailyFrequentlyInterruptAlarm.js"></script>
		<script>
			$(function() {
				init();
			});
			function onSelectDivClick() {
				var div = $('#selectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#selectButtonIcon').removeClass("fa fa-caret-up");
					$('#selectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#selectButtonIcon').removeClass("fa fa-caret-down");
					$('#selectButtonIcon').addClass("fa fa-caret-up");
				}
			}
			function onColumnsSelectDivClick(){
				var div = $('#columnsSelectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-up");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-down");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-up");
				}
				
			}
		</script>
	</ui:define>
</ui:composition>



